(function() {
  var rootCommentableId = <%== "comments-for-#{@comment.root_commentable.commentable_type.demodulize}-#{@comment.root_commentable.id}".to_json %>;
  var commentHtml = '<%== j(render @comment).strip %>';
  var inReplyTo = <%== (reply?(@comment) ? @commentable.id : nil).to_json %>;
  var alignment = <%= @comment.alignment.nil? ? "null" : @comment.alignment %>;

  var $comments = $("#" + rootCommentableId);
  var component = $comments.data("comments");
  if (inReplyTo) {
    component.addReply(inReplyTo, commentHtml, true);

    var hideButton = $("#comment_" + <%= root_comment.id %>).find("[data-comment-hide]").first();
    hideButton.find("[data-show-comment-reply]").first().html('<%= t("decidim.components.comment.show_replies", count: Decidim::Comments::SortedComments.for(root_comment.reload).size) %>');

  } else {
    component.addThread(commentHtml, alignment, true);
  }

  Rails.fire(document, "comments:loaded", {
    commentsIds: [<%= @comment.id %>, <%= @comment.commentable.id %>]
  });

  // Update the comments count
  $(".comments-count", $comments).text(<%== t("decidim.components.comments.title", count: @comments_count).to_json %>);

  var $addCommentCard = $("#add-comment-anchor");

  if ($addCommentCard.hasClass("fullscreen")) {
    $addCommentCard.addClass("hidden");
    $addCommentCard.removeClass("fullscreen");
  }
}());
